<template>
	<view class="container" :class="[]">
		<view class="loding_animation" v-if="loading">
			<u-loading-icon ></u-loading-icon>
		</view>
		<image v-show="!loading" class="image" lazy-load :src="src" mode="aspectFill" @load="loading = false"></image>
	</view>
</template>

<script>
	export default {
		name:"x-image",
		props: {
			src: {
				type: String,
				default: ''
			},
			class: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				loading: true
			};
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		position: relative;
		
		.loding_animation{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
</style>